import { useIntersectionObserver } from '@vueuse/core';

const ImgLazy = {
  mounted(el) {
    const catchSrc = el.getAttribute('data-src');
    el.src = catchSrc;
    const { stop } = useIntersectionObserver(el, ([{ isintersacting }]) => {
      if (isintersacting) {
        console.log('seen');
        el.src = catchSrc;
        stop();
      } else {
        console.log('unseen');
      }
    });
  },
};

export default {
  install: app => {
    console.log('install lazy-img directive');
    app.directive('imgLazy', ImgLazy);
  },
};
